<template>
  <div class="dibu">
    <van-nav-bar
        title="首页"/>
    <div class="wrap">
        <van-search v-model="value" placeholder="请输入搜索关键词" shape='round' />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,value) in imglist" :key="value">
                <img :src="item" alt="">

            </van-swipe-item>
          
        </van-swipe>
    </div>
    <van-grid>
        <van-grid-item :icon="require('../assets/img/1.jpg')" text="每日福利" />
        <van-grid-item :icon="require('../assets/img/2.jpg')" text="热销榜" />
        <van-grid-item :icon="require('../assets/img/3.jpg')" text="皮皮" />
        <van-grid-item :icon="require('../assets/img/4.jpg')" text="会员中心" />
        
    </van-grid>
    <van-grid :column-num="2" direction="horizontal">
        <van-grid-item  >  <span>222</span><img src="../assets/img/2.jpg" alt=""></van-grid-item>
        <van-grid-item text="文字" icon="photo-o"  />
        <van-grid-item text="文字" icon="photo-o"  />
        <van-grid-item text="文字" icon="photo-o"  />
      
    </van-grid>
   <p> <span></span>推荐商品</p>
    <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    <van-card
     v-for="item in list" :key="item.originalPrice"
    :origin-price='item.originalPrice '
    :price="item.currentPrice"
    :title="item.productName"
    :thumb="item.imgUrl"
    @click="todeta(item)"
    />
</van-list>
  </div>
</template>

<script>
import { getImg,getli } from "../utils/api";
export default {
  data() {
    return {
         value: '',
         imglist:[],
         list: [],
        loading: false,
        finished: false,
    };
  },

  components: {},

  computed: {},

  mounted() {
      this.getRatedList();
      this.getlist();
      this.toot()
      
  },

  methods: {
      async toot(){
          const res=await getImg();
          console.log(res);
      },
      async getRatedList() {  
       const res = await getImg();
       this.imglist= res.result.list;
        this.loading = false;
        if (this.list.length >=res.result.list.length) {
          this.finished = true;
        }
    },
     async getlist() {
       const res = await getli();
       this.list= res.result.list;
     
    },
    todeta(item){
         this.$router.push('/detail/'+item.productId)
    },
    
    onLoad() {
      
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    },
    
 
   
  }
};
</script>
<style lang="less" scoped>
.dibu{
    margin-bottom: 50px;
}
.wrap{
    width: 100%;
    height: 150px;
    background: lightcoral;
     position: relative;
    .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
        width: 100%;
        height: 100%;
    }
   
  }
    .van-search{
        position: absolute;
        background: transparent;
        z-index: 999;
        width: 100%;
        .van-search__content{
            background: rgba(255, 255, 255, 0.5);
        }
    }
    
}
p{
    display: flex;
}
p span{
    width: 3px;
    height:20px;
    display:block;
    background: red;
    margin:0 5px;
}
.van-list{
    
   .van-card{
       background: #FFF;
       .van-card__header{
           padding-bottom: 5px;
           border-bottom: 1px solid rgb(107, 103, 103);
           .van-card__price{
               color: red;
           }
       }
      
   }
}
</style>
